import { Network, Database, Gauge, Globe2, CheckCircle } from 'lucide-react';
import { useLanguage } from '@kernelproxy/i18n';

const IPv6Proxy = () => {
  const { language } = useLanguage();

  const stats = [
    {
      label: language === 'zh-CN' ? 'IPv6段数' : 'IPv6 Subnets',
      value: '128',
      icon: Network,
      color: 'text-blue-600 dark:text-blue-400',
    },
    {
      label: language === 'zh-CN' ? '可用IP数' : 'Available IPs',
      value: '2.5M',
      icon: Database,
      color: 'text-green-600 dark:text-green-400',
    },
    {
      label: language === 'zh-CN' ? '平均延迟' : 'Avg Latency',
      value: '45ms',
      icon: Gauge,
      color: 'text-purple-600 dark:text-purple-400',
    },
    {
      label: language === 'zh-CN' ? 'BGP路由' : 'BGP Routes',
      value: '24',
      icon: Globe2,
      color: 'text-orange-600 dark:text-orange-400',
    },
  ];

  const ipv6Subnets = [
    {
      subnet: '2001:db8:1234::/48',
      location: 'United States',
      status: 'active',
      usage: '45%',
      bandwidth: '1.2 Gbps',
      allocatedIPs: '125K',
    },
    {
      subnet: '2001:db8:5678::/48',
      location: 'Europe',
      status: 'active',
      usage: '62%',
      bandwidth: '2.5 Gbps',
      allocatedIPs: '280K',
    },
    {
      subnet: '2001:db8:9abc::/48',
      location: 'Asia Pacific',
      status: 'active',
      usage: '38%',
      bandwidth: '980 Mbps',
      allocatedIPs: '95K',
    },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          {language === 'zh-CN' ? '数据中心IPv6代理' : 'Datacenter IPv6 Proxy'}
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-2">
          {language === 'zh-CN' ? '管理您的IPv6资源池和网络性能' : 'Manage your IPv6 resource pools and network performance'}
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <div key={index} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <stat.icon className={`w-8 h-8 ${stat.color}`} />
            <p className="text-2xl font-bold text-gray-900 dark:text-white mt-4">{stat.value}</p>
            <p className="text-gray-600 dark:text-gray-400 text-sm mt-1">{stat.label}</p>
          </div>
        ))}
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
          {language === 'zh-CN' ? 'IPv6子网管理' : 'IPv6 Subnet Management'}
        </h2>
        <div className="space-y-4">
          {ipv6Subnets.map((subnet, index) => (
            <div key={index} className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center space-x-3">
                  <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
                  <span className="font-mono text-lg text-gray-900 dark:text-white">{subnet.subnet}</span>
                </div>
                <span className="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 text-sm rounded-full">
                  {subnet.status}
                </span>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-3">
                <div>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{language === 'zh-CN' ? '位置' : 'Location'}</p>
                  <p className="text-sm font-medium text-gray-900 dark:text-white">{subnet.location}</p>
                </div>
                <div>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{language === 'zh-CN' ? '使用率' : 'Usage'}</p>
                  <p className="text-sm font-medium text-gray-900 dark:text-white">{subnet.usage}</p>
                </div>
                <div>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{language === 'zh-CN' ? '带宽' : 'Bandwidth'}</p>
                  <p className="text-sm font-medium text-gray-900 dark:text-white">{subnet.bandwidth}</p>
                </div>
                <div>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{language === 'zh-CN' ? '已分配IP' : 'Allocated IPs'}</p>
                  <p className="text-sm font-medium text-gray-900 dark:text-white">{subnet.allocatedIPs}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
            {language === 'zh-CN' ? '网络性能' : 'Network Performance'}
          </h2>
          <div className="space-y-4">
            {[
              { label: language === 'zh-CN' ? '平均延迟' : 'Avg Latency', value: '45ms', status: 'good' },
              { label: language === 'zh-CN' ? '峰值带宽' : 'Peak Bandwidth', value: '5.2 Gbps', status: 'good' },
              { label: language === 'zh-CN' ? '丢包率' : 'Packet Loss', value: '0.02%', status: 'good' },
            ].map((metric, i) => (
              <div key={i} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                <span className="text-gray-700 dark:text-gray-300">{metric.label}</span>
                <span className="font-bold text-green-600 dark:text-green-400">{metric.value}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
            {language === 'zh-CN' ? 'BGP状态' : 'BGP Status'}
          </h2>
          <div className="space-y-3">
            {[
              { peer: 'AS13335', status: 'Established', routes: 892 },
              { peer: 'AS15169', status: 'Established', routes: 1245 },
              { peer: 'AS8075', status: 'Established', routes: 756 },
            ].map((bgp, i) => (
              <div key={i} className="p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                <div className="flex items-center justify-between mb-2">
                  <span className="font-mono text-sm text-gray-900 dark:text-white">{bgp.peer}</span>
                  <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 rounded">
                    {bgp.status}
                  </span>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  {language === 'zh-CN' ? '路由数' : 'Routes'}: {bgp.routes}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default IPv6Proxy;
